/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2025-06-29 23:37:23
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2025-07-08 22:32:00
 * @FilePath: /book-manage-react/src/components/UserInfo.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https:
 */

import React, { useMemo } from 'react';
import { Dropdown, Menu, Space, Avatar, Typography } from 'antd';
import {
  UserOutlined,
  CrownOutlined,
  ClockCircleOutlined,
  LogoutOutlined,
  DownOutlined,
} from '@ant-design/icons';

const { Text } = Typography;

const UserInfo = ({ userInfo, onLogout }) => {
  
  const formatLoginTime = useMemo(() => {
    if (!userInfo?.loginTime) return '';
    const date = new Date(userInfo.loginTime);
    return date.toLocaleString('zh-CN', {
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    });
  }, [userInfo]);

  const menu = (
    <Menu
      onClick={({ key }) => {
        if (key === 'logout') onLogout();
      }}
      items={[
        {
          key: 'user',
          icon: <UserOutlined />,
          label: <>用户：{userInfo.username}</>,
          disabled: true,
        },
        ...(userInfo.role === 'admin'
          ? [
              {
                key: 'admin',
                icon: <CrownOutlined />,
                label: <>管理员身份</>,
                disabled: true,
              },
            ]
          : []),
        {
          key: 'loginTime',
          icon: <ClockCircleOutlined />,
          label: <>登录时间：{formatLoginTime}</>,
          disabled: true,
        },
        {
          key: 'logout',
          icon: <LogoutOutlined />,
          danger: true,
          label: '退出登录',
          
          
        },
      ]}
    />
  );

  return (
    <Dropdown overlay={menu} trigger={['hover']}>
      <div
        style={{
          marginLeft: 20,
          display: 'flex',
          alignItems: 'center',
          cursor: 'pointer',
          padding: '5px 10px',
          borderRadius: 4,
          transition: 'all 0.3s',
        }}
        onMouseEnter={e => (e.currentTarget.style.background = 'rgba(64, 158, 255, 0.1)')}
        onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
      >
        <Avatar
          size={32}
          style={{ backgroundColor: '#f0f2f5', marginRight: 8 }}
          icon={<UserOutlined style={{ color: '#909399' }} />}
        />
        <Text style={{ margin: '0 8px', color: '#606266' }}>{userInfo.username}</Text>
        <DownOutlined style={{ color: '#909399' }} />
      </div>
    </Dropdown>
  );
};

export default UserInfo;
